<template>
    <div class="mains">
        <el-container class="mains-box">
            <SideMenu></SideMenu>
            <el-container class="mains-box-right">
                <MyHead></MyHead>
                <el-main>
                    <!-- 子路由 -->
                    <router-view></router-view>
                </el-main>
                <MyFoot></MyFoot>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import {useStore} from "vuex";
import { computed, onMounted } from "vue";
import SideMenu from "@/components/SideMenu.vue"
import MyHead from '@/components/MyHead.vue'
import MyFoot from '@/components/MyFoot.vue'

const store = useStore()
const info = computed(()=>store.state.userInfo)
onMounted(()=>{
    // 获取个人信息
    store.dispatch('getUserInfoAsync')
})
</script>
<style lang="scss" scoped>
.mains{
    &-box{
        height:100vh;
        // background-color: palegreen;
        &-right{
            display: flex;
            flex-direction: column;
        }
    }
}
</style>